<template>
  <div class="userInfo">
    <div class="userInfo_content">
      <el-card class="userInfo_content_item userInfo_content_item_1">
        <div slot="header">
          <span style="font-weight: bold; font-size: 16px">基本信息</span>
        </div>
        <ul>
          <li>
            <div class="name">村龄&nbsp;:</div>
            <div class="content">
              {{
                formatDateRenturnYear(userStoreUserDetail.profile.createTime)
              }}
              ({{
                formatDateRenturnYearMonth(
                  userStoreUserDetail.profile.createTime
                )
              }})
            </div>
          </li>
          <li>
            <div class="name">性别&nbsp;:</div>
            <div class="content">
              {{ formatGender(userStoreUserDetail.profile.gender) }}
            </div>
          </li>
          <li>
            <div class="name">年龄&nbsp;:</div>
            <div class="content">
              {{ formatHou(userStoreUserDetail.profile.birthday) }}
              &nbsp;{{ formatXingzuo(userStoreUserDetail.profile.birthday) }}
            </div>
          </li>

          <li>
            <div class="name">听歌&nbsp;:</div>
            <div class="content">
              累计听歌{{ userStoreUserDetail.listenSongs }}首
            </div>
          </li>
          <li>
            <div class="name">个人简洁&nbsp;:</div>
            <div class="content">
              {{ userStoreUserDetail.profile.signature }}
            </div>
          </li>
        </ul>
      </el-card>
      <!-- <el-card class="userInfo_content_item userInfo_content_item_1">
        <div slot="header">
          <span style="font-weight: bold; font-size: 16px">创建的歌单</span>
        </div>
      </el-card> -->
      <!-- <el-card class="userInfo_content_item userInfo_content_item_1">1</el-card> -->
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import moment from "moment";
import { xingzuo } from "../../../utils/format";
import { getUserAlbum } from "../../../api/myMusicApi";
export default {
  name: "userInfo",
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState({
      userStoreProfile: (state) => state.userStore.profile,
      userStoreCookie: (state) => state.userStore.cookie,
      userStoreToken: (state) => state.userStore.token,
      userStoreUserDetail: (state) => state.userStore.userDetail,
    }),
  },
  created() {},
  methods: {
    // 用户用户的歌单
    async getUserAlbumMethods() {
      let result = await getUserAlbum(this.userStoreProfile.userId);
    },

    // 格式化时间，返回 年
    formatDateRenturnYear(time) {
      let createYear = moment(time).format("YYYY");
      let nowYear = moment().format("YYYY");
      // let nowSs = +new Date();
      // console.log(nowSs);
      // console.log(moment(nowSs - time).format("YYYY"));
      return nowYear - createYear + "年";
    },
    formatDateRenturnYearMonth(time) {
      return moment(time).format("YYYY年MM月") + "注册";
    },
    formatGender(flag) {
      if (flag === 1) {
        return "男";
      } else if (flag === 2) {
        return "女";
      } else {
        return "未知";
      }
    },
    formatHou(birthday) {
      let str = moment(birthday).format("YY");
      return str + "后";
    },
    formatXingzuo(birthday) {
      let str = moment(birthday).format("YYYY-MM-DD").slice(5);
      let arr = str.split("-");
      return xingzuo(arr[0], arr[1]);
    },
  },
};
</script>

<style lang="less" scoped>
.userInfo {
  .userInfo_content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /deep/ .el-card {
      border-radius: 8px;
    }
    /deep/ .el-card__header {
      padding-top: 6px;
      padding-bottom: 6px;
    }
    .userInfo_content_item {
      width: 450px;
      margin-bottom: 20px;
    }
    .userInfo_content_item_1 {
      ul li {
        display: flex;
        color: #333333;
        margin-bottom: 10px;
        .name {
          margin-right: 6px;
          color: #999;
        }
      }
    }
  }
}
</style>
